<template>
  <div style="
      display: flex;
      flex-direction: column;
      gap: 2rem;
      height: 100%;
      overflow-y: auto;
    ">
    <div class="white1">
      <div style="
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        ">
        <div class="item1" style="background: linear-gradient(to right, #e03f82, #c9478e)">
          <p style="font-size: 1rem; font-weight: bold">订单总量</p>

          <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-top: 0.8rem;
              padding-right: 2rem;
              box-sizing: border-box;
            ">
            <p>
              <el-icon style="color: white" size="1.5rem">
                <Histogram />
              </el-icon>
            </p>
            <van-rolling-text :start-num="0" :target-num="ListLength" stop-order="rtl"
              style="font-size: 1.5rem; font-weight: bold; color: white" />
          </div>
        </div>
        <div class="item2" style="background: linear-gradient(to right, #6e4cbc, #5c45b1)">
          <p style="font-size: 1rem; font-weight: bold">预约订单</p>

          <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-top: 1.3rem;
              padding-right: 2rem;
              box-sizing: border-box;
            ">
            <el-icon style="color: white" size="1.5rem">
              <Document />
            </el-icon>
            <van-rolling-text :start-num="0" :target-num="unCompleteOrder" stop-order="rtl"
              style="font-size: 1.5rem; font-weight: bold; color: white" />
          </div>
        </div>
        <div class="item3" style="background: linear-gradient(to right, #49beed, #5ae5e8)">
          <p style="font-size: 1rem; font-weight: bold">已完成</p>

          <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-top: 0.8rem;
              padding-right: 2rem;
              box-sizing: border-box;
            ">
            <p>
              <el-icon style="color: white" size="1.5rem">
                <CircleCheckFilled />
              </el-icon>
            </p>

            <van-rolling-text :start-num="0" :target-num="completeOrder" stop-order="rtl"
              style="font-size: 1.5rem; font-weight: bold; color: white" />
          </div>
        </div>
        <div class="item4" style="background: linear-gradient(to right, #fba633, #fc8c41)">
          <p style="font-size: 1rem; font-weight: bold">订单总价</p>

          <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-right: 2rem;
            ">
            <p style="color: white; font-size: 1.5rem">￥</p>

            <van-rolling-text :start-num="0" :target-num="allPrice" stop-order="rtl"
              style="font-size: 1.5rem; font-weight: bold; color: white" />
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: space-evenly; height: 100%">
      <tiaobar></tiaobar>
      <bar></bar>
    </div>
    <div style="display: flex; background-color: aqua"></div>
  </div>
</template>

<script setup>
import {
  Histogram,
  FolderOpened,
  CircleCheckFilled,
  Document,
} from "@element-plus/icons-vue";
import { useCounterStore } from "@/stores/counter.js";
import bar from "@/component/echart/bar.vue";
import tiaobar from "@/component/echart/tiaoBar.VUE";
import { onMounted, ref } from "vue";
import { RollingText } from "vant";
import { get } from "@/util/request";
const store = useCounterStore();



let AllOrderList = ref([])
let ListLength = ref()
let completeOrder = ref(0)
let allPrice = ref(0)
let unCompleteOrder = ref(0)
let canceledOrder = ref(0)
const getMyOrderList = async () => {
  let { data: { code, data } } = await get('/shopfront/getorder')
  if (code == 200) {
    AllOrderList.value = data
    data.forEach(i => {
      if (i.status == 0) {
        completeOrder.value++
        allPrice.value += i.amout
      } else if (i.status == 1) {
        unCompleteOrder.value++
      } else if (i.status == 2) {
        canceledOrder.value++
      }
    })
    ListLength.value = AllOrderList.value.length
  }
}

onMounted(() => {
  getMyOrderList()
})
</script>

<style scoped>
.white1 {
  width: 100%;
  height: 15rem;
  background: white;
  border-radius: 0.5rem;
  padding: 2rem;
  box-sizing: border-box;
}

.item1,
.item2,
.item3,
.item4 {
  width: 20%;
  height: 8rem;
  margin-top: 0.5rem;
  border-radius: 0.7rem;
  padding-left: 1.5rem;
  box-sizing: border-box;
  color: white;
}
</style>
